<template>
	<div class="app-container">
		<!-- <div style="width: 99%;margin-bottom:10px">
			<el-card class="box-card">
				<div slot="header" class="clearfix"><span>订单状态</span></div>
				<div class="state-div">
					<div class="list-div">
						<div class="row-active">
							<div class="state-name">申请退款</div>
							<div class="state-index">1</div>
							<div class="state-time">{{ refund.createtime }}</div>
						</div>

						<div class="row-active">
							<div class="state-name">退款处理中</div>
							<div class="state-index">2</div>
							<div class="state-time"></div>
						</div>
						
						<div class="row-active" v-if="refund.refund_state == 4 || refund.refund_state == 5" >
							<div class="state-name">退款完成</div>
							<div class="state-index">3</div>
							<div class="state-time"></div>
						</div>
						
						<div  class="row" v-else>
							<div class="state-name">退款完成</div>
							<div class="state-index">3</div>
							<div class="state-time"></div>
						</div>
					
						
					</div>
					<div class="xu-xian" v-if="data"></div>
				</div>
			</el-card>
		</div> -->
		<div style="margin-bottom: 10px;">
			<el-button type="primary" icon="el-icon-back" size="small" @click="back">返回上一页</el-button>
		</div>
		<div class="" style="display: flex;">
			<div style="width: 49%;">
				<el-card class="box-card">
					<div slot="header" class="clearfix"><span>退款信息</span></div>
					<div class="list">
						<div class="row">
							<div class="title">订单编号：</div>
							<div class="value">{{ item.order_id }}</div>
						</div>
						<div class="row">
							<div class="title">商品金额：</div>
							<div class="value">	<el-tag size="small" type="danger">￥{{ item.sell_price }}</el-tag></div>
							<!-- <div class="value">{{refund.is_add_freight==1?'（含运费）':'（不含运费）'}}</div> -->
						</div>
						<div class="item-info">
							<div class="img">
								 <el-image
									style="width: 70px;height: 70px;"
								    :src="item.image_center" 
								    :preview-src-list="[item.image_center]">
								  </el-image>
							</div>
							<div class="">
								<div class="name">{{item.product_name}}</div>
								<div class="name" style="margin-top: 10px;color: #999;font-size: 13px;">{{item.sku_text}}</div>
								<div class="name" style="margin-top: 10px;color: #999;font-size: 13px;">x{{item.nums}}</div>
							</div>
						</div>
						<div class="row">
							<div class="title">申请时间：</div>
							<div class="value">{{ refund.createtime }}</div>
						</div>
						<div class="row">
							<div class="title">退款总额：</div>
							<div class="value">
								<el-tag size="small" type="danger">￥{{ refund.refund_amount }}</el-tag>
							</div>
						</div>
						<div class="row">
							<div class="title">退款原因：</div>
							<div class="value">{{ refund.refund_reason }}</div>
						</div>
						<div class="row">
							<div class="title">退款方式：</div>
							<div class="value">{{ refund.refund_mode==1?'仅退款':'退货退款' }}</div>
						</div>
						<div class="row">
							<div class="title">买家信息：</div>
							<div class="value">{{ $setAddr(data.express_address,data.delivery_method)}}, {{ data.express_receive_name}}, {{ data.express_phone }}</div>
						</div>
						<div class="row">
							<div class="title">买家留言：</div>
							<div class="value">{{ refund.refund_remarks }}</div>
						</div>
						<div class="row" v-if="refund.refund_mode==2&&refund.refund_adrr">
							<div class="title">收件信息：</div>
							<div class="value">{{refund.refund_adrr}}, {{ refund.refund_admin_name }}, {{refund.refund_admin_phone}}</div>
						</div>
						<div class="row" v-if="refund.refund_mode==2&&refund.refund_adrr">
							<div class="title">退货备注：</div>
							<div class="value">{{ refund.refund_admin_remark }}</div>
						</div>
						<div class="img-list" style="margin-bottom: 15px;">
							<div class="img-col" v-for="(img,index) in refund.img">
								<el-image :src="img + '?imageView2/1/w/100/h/100'" :preview-src-list="[img]"></el-image>
							</div>
						</div>
						<div v-if="refund.refund_mode!=1">
							<div class="cont" style="margin-bottom: 15px;">退货物流信息：{{refundExpresses.length==0?'暂无物流信息':''}}</div>
							<div class="list" v-if="refundExpresses.length>0">
								<el-tabs v-model="activeName" type="card">
									<el-tab-pane v-for="(item,index) in refundExpresses" :key="index" :label="'包裹'+(index+1)"
										:name="(index+1)+''">
										<div style="padding: 20px 10px;">
											<span>物流公司：{{item.express_com_text}}</span>
											<span style="margin-left: 40px;">物流单号：{{item.express_no?item.express_no:'无'}}</span>
										</div>
										<el-timeline
											style="padding: 15px 60px;height: 380px;overflow: hidden;overflow-y: scroll;">
											<el-timeline-item v-for="(express,index2) in item.content" :key="index2"
												size="large" :color="index2==0?'#1890ff':''">
												<div class="time" style="color: #999;">{{ express.time }}</div>
												<div class="text" style="margin: 10px 0 15px 0;">{{ express.context }}</div>
											</el-timeline-item>
										</el-timeline>
									</el-tab-pane>
								</el-tabs>
							</div>
						</div>
					</div>
				</el-card>
			</div>
			<div style="width: 49%;margin-left: 1%;display: inline;">
				<el-card class="box-card" style="height: 100%;">
					<div slot="header" class="clearfix"><span>处理退款</span></div>
					<div v-if="refund.refund_state == 1&& refund.refund_mode==2">
						<el-tag type="danger"
							style="width: 100%;height: 40px;font-size: 14px;line-height: 40px;margin-bottom: 15px;">
							等待发送退货地址及方式！</el-tag>
					</div>
					<div v-else-if="refund.refund_state == 1&& refund.refund_mode==1">
						<el-tag type="danger"
							style="width: 100%;height: 40px;font-size: 14px;line-height: 40px;margin-bottom: 15px;">
							等待确认退款。</el-tag>
					</div>
					<div v-else-if="refund.refund_state == 3">
						<div style="display: flex;align-items: center;">
							<div class="" style="margin-right: 20px;margin-bottom: 15px;">商家已经拒绝退款</div>
						</div>
					</div>
					<div v-else-if="refund.refund_state == 5">
						<div style="display: flex;align-items: center;">
							<el-tag type="success" style="width: 100%;height: 40px;font-size: 14px;line-height: 40px;">
								退款完成，退款金额将原路返回到用户账户！ </el-tag>
						</div>
					</div>
					<div v-else-if="refund.refund_state == 11">
						<div style="display: flex;align-items: center;">
							<el-tag type="danger" style="width: 100%;height: 40px;font-size: 14px;line-height: 40px;">
								同意退款申请，待用户填写退货快递单。</el-tag>
						</div>
					</div>
					<div v-else-if="refund.refund_state == 12">
						<el-tag type="danger"
							style="width: 100%;height: 62px;font-size: 14px;padding:10px;margin-bottom: 15px;">
							<div style="line-height: 22px;">买家已提交退货物流，待商家收货确认</div>
							<div style="line-height: 22px;">快递：{{refund.refund_express_mode}}, 单号：{{refund.refund_express_code}}</div>
						</el-tag>
					</div>
				</el-card>
			</div>
		</div>
	
	</div>
</template>

<script>
import Api from '@/api/pages/mall/order'
export default {
	data() {
		return {
			id: '',
			data: '',
			refund: '',
			item:'',
			refundExpresses:[], //退货物流
			activeName: '1',
		};
	},
	created() {
		this.id = this.$route.query.id;
		this.getInfo();
	},
	methods: {
		back(){
			if (this.$route.query.type == 1) {
				this.$router.push({
					path: '/mall/orderList'
				})
			} else {
				this.$router.push({
					path: '/mall/chargebackList'
				})
			}
		},
		
		// 查看物流
		getOrderExpress() {
			Api.orderExpress({
				order_id: this.data.id,
				type: 1
			}).then(res => {
				if (res.state) {
					(res.data||[]).map(item=>{
						item.content = JSON.parse(item.content);
						return item;
					})
					this.refundExpresses = res.data
				}
			})
		},
		
		getInfo() {
			Api.getOrderRefundDetail({
				item_id: this.id
			}).then(res => {
				this.data = res.data.order;
				this.refund = res.data.refund
				this.item = res.data.item;
				this.getOrderExpress()
			});
		},
		
	}
};
</script>
<style lang="scss" scoped>
.list {
	font-size: 14px;
	color: #666666;
	.row {
		margin: 15px 0;
		display: flex;
		.title {
			flex-shrink: 0;
			line-height: 22px;
		}
		.value {
			line-height: 22px;
		}
		.col-xg {
			line-height: 22px;
			margin-left: 10px;
			color: #337ab7;
			cursor: pointer;
		}
	}
}
.col-xg {
			line-height: 22px;
			margin-left: 10px;
			color: #337ab7;
			cursor: pointer;
		}
.good-img {
	width: 80px;
	height: 80px;
	margin-right: 10px;
	img {
		width: 100%;
		height: 100%;
	}
}
.order-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
	background-color: #eee;
	font-size: 14px;
	color: #666;
	padding: 0 20px;
}
td,
tr,
table {
	border: 1px #eee solid;
	font-size: 14px;
}
td {
	padding: 10px;
}
.state-div {
	padding: 30px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	.list-div {
		position: relative;
		z-index: 999;
		width: 100%;
		display: flex;
		justify-content: space-between;
		.row {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 14px;
			.state-name {
				color: #999;
			}
			.state-index {
				color: #ffffff;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: #ccc;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 10px 0;
			}
			.state-time {
				color: #ccc;
				font-size: 14px;
			}
		}
		.row-active {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 14px;
			.state-name {
				color: #13ce66;
			}
			.state-index {
				color: #ffffff;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: #13ce66;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 10px 0;
			}
			.state-time {
				color: #ccc;
				font-size: 14px;
			}
		}
	}
	.xu-xian {
		position: relative;
		top: -41px;
		width: 75%;
		border-bottom: 1px #999 dashed;
	}
	
}
.item-info{
		width: 100%;
		padding-bottom: 10px;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		.img{
			width: 70px;
			height: 70px;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.name{
			margin-left: 10px;
		}
	}
.img-list{
	display: flex;
	.img-col{
		width: 70px;
		height: 70px;
		border-radius: 50%;
		margin-right: 10px;
		img{
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
}
</style>
